<template>
  <div>内容页面
    <img :src="itemObj.sku_img_url" class="item_img"/>
    <div>{{itemObj.sku_name}}</div>

    <div class="footer_btn">
      <div @click="addcart(item_id)">加入购物车</div>
      <div>立即购买</div>
    </div>
  </div>
</template>

<script>
//引入 axios
import axios from "axios";

export default {
 name:"item",
 data:function(){
   return{
     itemObj:{},
     item_id:0,
     min_price:0,
   }
 },
 mounted(){
   this.item_id = this.$route.params.id;
   this.min_price = this.$route.params.min_price;
   axios.get("./json/item_"+this.item_id+".json").then((res)=>{
     console.log(res);
     this.itemObj = res.data.data.reviews[0];
   })
 },
 methods:{
   //添加购物车
   addcart(item_id){
     console.log(item_id);
     //将需要展示到购物车中的数据进行整理
     var item ={
       item_id:this.item_id,
       min_price:this.min_price,
       sku_img_url:this.itemObj.sku_img_url,
       sku_name:this.itemObj.sku_name,
       num:1,
     };
     //调用action
     this.$store.dispatch("ADD_CART_AC", item);
   }
 }
}
</script>

<style scoped>
.item_img{
  width: 100%;
}
.footer_btn{
  position:fixed;
  width: 375px;
  box-sizing: border-box;
  padding: 10px;
  height: 66px;
  line-height: 46px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
}
.footer_btn div:nth-of-type(1){
  background:#fff;
  color:#121212;
  border:1px solid grey;
  width: 165PX;
  height: 45PX;
}
.footer_btn div:nth-of-type(2){
  background:#121212;
  color:#fff;
  border:1px solid grey;
  width: 165PX;
  height: 45PX;
}

</style>